<template>
  <gt_guild>
    <template v-slot:nocard v-if="gd.gload == false">
      <!-- 状态 -->
      <div class="nbox1">
        <template v-if="gd.guild?.boss_data?.data?.length >= 1">
          <div class="gd_title" style="text-align: center">首领状态</div>
          <div style="text-align: center" v-if="gd.season <= 2000">
            回合〔 {{ gd.guild.boss_data?.info.round }} 〕等级〔
            {{ gd.guild.boss_data?.info.level }} 〕 生命值〔
            {{ gd.guild?.boss_data?.data?.[0].max_hp?.toLocaleString() }} 〕
          </div>
          <div class="stat_div">
            <n-grid y-gap="12" x-gap="12" :cols="val.cols_boss">
              <template v-for="item in gd.guild.boss_data.data">
                <n-gi>
                  <div class="stat_box hvr-float-shadow">
                    <div class="stat_img_box">
                      <img :src="cfg.function.boss_ava(item.boss_name)" />
                    </div>
                    <div class="stat_bossname">{{ item.boss_name }}</div>
                    <n-progress
                      v-if="gd?.season <= 2000"
                      style="
                        margin-top: 0.5rem;
                        border: solid 1px #322a18;
                        box-shadow: 0 0 3px #000;
                        border-radius: 2px;
                      "
                      :height="24"
                      :border-radius="0"
                      indicator-text-color="rgb(192 209 204)"
                      rail-color="#04090A"
                      color="#D23117"
                      type="line"
                      :percentage="Number(((item.min_hp / item.max_hp) * 100).toFixed(2))"
                      :indicator-placement="'inside'"
                      processing
                    >
                      <template #default
                        >{{ Number(((item.min_hp / item.max_hp) * 100).toFixed(2)) }}%
                        {{ parseInt(item.min_hp / 10000) }}w
                      </template>
                    </n-progress>
                  </div>
                </n-gi>
              </template>
            </n-grid>
          </div>
        </template>
      </div>
      <!-- 出刀数 -->
      <div class="nbox1">
        <template v-if="gd.guild?.boss_data?.data?.length >= 1">
          <div class="gd_title" style="text-align: center">公会出刀数</div>
          <n-tabs
            type="line"
            :bar-width="12"
            justify-content="center"
            @update:value="val.upcds"
          >
            <n-tab style="font-size: 13px" name="所有">
              <template #default><div class="_div">所有</div></template>
            </n-tab>
            <template v-for="item in gd.guild.boss_data.data">
              <n-tab style="font-size: 13px" :name="item.boss_name">
                <template #default
                  ><div class="_div">{{ item.boss_name }}</div></template
                >
              </n-tab>
            </template>
          </n-tabs>
          <div class="cds_div">
            <div class="cds_bg">
              <div class="cds_box">
                <div class="_cdsname">名称</div>
                <!-- 循环七天 -->
                <template v-for="(item, key) in 7">
                  <div class="__datatext_day">第{{ item }}天</div>
                </template>
              </div>
              <template v-for="(item, key) in val.cdsdata">
                <div class="cds_box">
                  <div class="_cdsname">{{ item.name }}</div>
                  <template v-for="(item2, key2) in item.data">
                    <div class="__datatext">{{ item2.count }}</div>
                  </template>
                </div>
              </template>
            </div>
          </div>
          <br />
        </template>
      </div>
      <!-- 回合数据 -->
      <div class="nbox1">
        <template v-if="gd.guild?.boss_data?.data?.length >= 1">
          <div class="gd_title" style="text-align: center" v-if="gd.season <= 2000">
            回合 （{{ gd.guild.boss_data?.info.round - 1 }} -
            {{ gd.guild.boss_data?.info.round }}） 战斗记录
          </div>
          <div class="gd_title" style="text-align: center" v-else>迷你战斗记录</div>
          <n-tabs
            type="line"
            :bar-width="12"
            justify-content="center"
            @update:value="val.uptabs"
          >
            <n-tab style="font-size: 13px" name="所有">
              <template #default><div class="_div">所有</div></template>
            </n-tab>
            <template v-for="item in gd.guild.boss_data.data">
              <n-tab style="font-size: 13px" :name="item.boss_name">
                <template #default
                  ><div class="_div">{{ item.boss_name }}</div></template
                >
              </n-tab>
            </template>
          </n-tabs>

          <template v-if="cfg.mobile == true">
            <component :is="comp.m_report" :val="val" />
          </template>
          <template v-else>
            <component :is="comp.report" :val="val" />
          </template>
        </template>
      </div>
    </template>
  </gt_guild>
</template>

<script>
//2024/07/09 猫燐
import { cfg } from "@/cfg/cfg.js";
import gt_guild from "@/comp/gt_guild.vue";

export default {
  components: {
    gt_guild,
  },
  setup() {
    const comp = {
      m_report: defineAsyncComponent(() => import("./stat/m_report.vue")),
      report: defineAsyncComponent(() => import("./stat/report.vue")),
    };
    let gd = cfg.guild;
    let val = reactive({
      timer: ref(),
      type: "所有",
      type2: "所有",
      coldw: cfg.mobile == true ? 170 : 280,
      colw_boss: cfg.mobile == true ? 170 : 200,
      cols_boss: 2,
      cols: 1,
      timer_act: false,

      uptabs: (tab) => {
        val.type = tab;
        val.timer_end();
      },
      upcds: (tab) => {
        val.type2 = tab;
        val.load_cds();
      },
      timer_end: async () => {
        let res = await cfg.axios.get(`${cfg.url}`, {
          params: {
            t: "v2/get",
            t2: "guild/report",
            gid: gd.guild.gid,
            guild_id: gd.guild.guild_id,
            type: "round",
            boss: val.type,
            season: gd.season,
            round: gd.guild.boss_data?.info.round,
          },
        });
        res = res.data;
        val.reportdata = res.data;
      },
      load_cds: async () => {
        let res = await cfg.axios.get(`${cfg.url}`, {
          params: {
            t: "v2/get",
            t2: "guild/report",
            gid: gd.guild.gid,
            guild_id: gd.guild.guild_id,
            type: "cds",
            boss: val.type2,
            season: gd.season,
            round: gd.guild.boss_data?.info.round,
          },
        });
        res = res.data;
        val.cdsdata = res.data;
      },
      reportdata: [],
    });
    val.cols = parseInt(cfg.sswd / val.coldw);
    val.cols_boss = parseInt(cfg.sswd / val.colw_boss);
    if (val.cols_boss >= 4) {
      val.cols_boss = 4;
    } else {
      if (val.cols_boss == 3) {
        val.cols_boss = 2;
      }
    }

    //加载公会初始化
    gd.runfunc = async () => {
      gd.vuename = "公会总览";
      val.type = "所有";
      val.type2 = "所有";
      val.timer_act = true;
      await val.timer_end();
      await val.load_cds();
    };

    //如果触发更新公会
    gd.updfunc = async () => {};

    watch(
      () => cfg.sswd,
      (newWidth, oldWidth) => {
        val.cols = parseInt(cfg.sswd / val.coldw);
        val.cols_boss = parseInt(cfg.sswd / val.colw_boss);
        if (val.cols_boss >= 4) {
          val.cols_boss = 4;
        } else {
          if (val.cols_boss == 3) {
            val.cols_boss = 2;
          }
        }
      }
    );

    onMounted(async () => {
      cfg.updateWidth();
    });

    return {
      cfg,
      gd,
      val,
      comp,
    };
  },
};
</script>
